var picIndex=0;
$(function() {
	$('#list li').on('click', function(){
		event.preventDefault();
		picIndex=$(this).index();
		showPic(picIndex);
		$('.open-div').addClass("ani");
	});
	$('.pre-img').on('click', function(){
		event.preventDefault();
		picIndex-=1;
		if(picIndex<0){
			picIndex=$('#list li').length-1;
		};
		showPic(picIndex,true);
	});
	$('.next-img').on('click', function(){
		event.preventDefault();
		picIndex+=1;
		if(picIndex===$('#list li').length){
			picIndex=0;
		};
		showPic(picIndex,true);
	})
	$('.close-div').on('click', function(){
		$('.open-div').removeClass("ani");
	});
	$('.open-div').on('click', function(e){
		if ($(e.target).hasClass('ani')) {
			$('.close-div').trigger('click');
		}
	});
})
function showPic(index,opacity){
	if(opacity){
		$('.open-div img:eq(1)').attr('src',$('#list li:eq('+index+') a').attr('href'))
		$('.open-div img:eq(1)').css('opacity',1);
		$('.open-div img:eq(0)').animate({'opacity':'0'},350,function(){
			if($('.img-a').prev('img').hasClass('img-b')){
		        $('.img-b').clone().appendTo('.open-div')
		        $('.img-b').eq(0).remove()
		    }else{
		        $('.img-a').clone().appendTo('.open-div')
		        $('.img-a').eq(0).remove()
		    }
		    $('.open-div img:eq(0)').css('z-index',2);
	    	$('.open-div img:eq(1)').css('z-index',1);
		});


	}else{
		$('.open-div img:eq(0)').attr('src',$('#list li:eq('+index+') a').attr('href'))
	}


}
var startX = 0, endX = 0;
//touchstart事件
function touchSatrtFunc(evt) {
	try
	{
		var touch = evt.touches[0]; //获取第一个触点
		var x = Number(touch.pageX); //页面触点X坐标
		var y = Number(touch.pageY); //页面触点Y坐标
		//记录触点初始位置
		startX = x;
		endX = 0;
		startY = y;
	}
	catch (e) {
		//alert('touchSatrtFunc：' + e.message);
	}
}

//touchmove事件，这个事件无法获取坐标
function touchMoveFunc(evt) {
	try
	{
		var touch = evt.touches[0]; //获取第一个触点
		var x = Number(touch.pageX); //页面触点X坐标
		var y = Number(touch.pageY); //页面触点Y坐标
		endX = x;
	}
	catch (e) {
		//alert('touchMoveFunc：' + e.message);
	}
}

//touchend事件
function touchEndFunc(evt) {
	try {
		//event.preventDefault();
		var dist = endX - startX;
		if(endX != 0 && (dist < -30 || dist > 30) && $(".open-div").hasClass("ani")){
			if (endX < startX) {
				$('.next-img').trigger('click');
			}
			else if(endX > startX) {
				$('.pre-img').trigger('click');
			}
		}
	}
	catch (e) {
		//alert('touchMoveFunc：' + e.message);
	}
}

//绑定事件
function bindEvent() {
	document.addEventListener('touchstart', touchSatrtFunc, true);
	document.addEventListener('touchmove', touchMoveFunc, true);
	document.addEventListener('touchend', touchEndFunc, true);
}

//判断是否支持触摸事件
function isTouchDevice() {
	try {
		document.createEvent("TouchEvent");
		bindEvent(); //绑定事件
	}
	catch (e) {
	   // alert("不支持TouchEvent事件！" + e.message);
	}
}
window.onload = isTouchDevice;